import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  Image,
  SafeAreaView,
  Dimensions,
} from 'react-native';
import { wp, hp } from '../utils/layout';
import { FONT_SIZES } from '../utils/fontSize';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

const ForgotPasswordScreen = ({ navigation }: any) => {
  const [account, setAccount] = useState('');

  return (
    <SafeAreaView style={styles.safeArea}>
      <KeyboardAvoidingView
        style={styles.flex1}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <View style={styles.container}>
          {/* 顶部栏 */}
          <View style={styles.header}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Text style={styles.back}>{'<'}</Text>
            </TouchableOpacity>
          </View>
          {/* 主体内容 */}
          <View style={styles.contentBox}>
            <Text style={styles.title}>找回密码</Text>
            <View style={styles.inputBox}>
              <Image source={{ uri: 'https://img.icons8.com/ios-filled/50/user-male-circle.png' }} style={styles.inputIconImg} />
              <TextInput
                style={styles.input}
                placeholder="手机号/邮箱"
                placeholderTextColor="#bbb"
                value={account}
                onChangeText={setAccount}
              />
            </View>
            <TouchableOpacity style={styles.nextBtn}>
              <Text style={styles.nextBtnText}>下一步</Text>
            </TouchableOpacity>
          </View>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  flex1: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    minHeight: SCREEN_HEIGHT,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    height: hp(6),
    paddingLeft: wp(4),
    marginTop: hp(1),
  },
  back: {
    fontSize: 28,
    color: '#222',
    fontWeight: 'bold',
  },
  contentBox: {
    marginTop: hp(6),
    paddingHorizontal: wp(6),
  },
  title: {
    fontSize: FONT_SIZES.xl,
    fontWeight: 'bold',
    color: '#222',
    textAlign: 'center',
    marginBottom: hp(5),
  },
  inputBox: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f6fa',
    borderRadius: wp(6),
    paddingHorizontal: wp(4),
    marginBottom: hp(3),
    height: hp(6),
    width: '100%',
  },
  inputIconImg: {
    width: wp(6),
    height: wp(6),
    resizeMode: 'contain',
    marginRight: wp(2),
  },
  input: {
    flex: 1,
    fontSize: FONT_SIZES.md,
    color: '#222',
    minWidth: 0,
  },
  nextBtn: {
    backgroundColor: '#1976ff',
    borderRadius: wp(8),
    height: hp(6),
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: hp(3),
    width: '100%',
  },
  nextBtnText: {
    color: '#fff',
    fontSize: FONT_SIZES.md,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default ForgotPasswordScreen; 